<template>
  <!-- 销售趋势 -->
  <div class="sales_wrap">
    <div class="top_wrap">
      <div class="title_1">
        <span v-if="!monthList.length">暂无数据</span>
      </div>
      <div class="top" id="topEchart"></div>
    </div>
    <div class="bottom_wrap">
      <div class="title_2">
        <span v-if="!yearList.length">暂无数据</span>
      </div>
      <div class="bottom" id="bottomEchart"></div>
    </div>
  </div>
</template>

<script>
import { salesTrend } from '@/request/store/K_KPIAnalysis'
import { deepClone } from '@/util/util'
export default {
  data() {
    return {
      monthList: [],
      yearList: [],
      topOption: {
        title: {
          left: 'center',
          text: '日销售'
        },
        xAxis: {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          name: '时间',
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line',
            color: '#1a7efc'
          }
        ]
      },
      bottomOption: {
        title: {
          left: 'center',
          text: '月销售'
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          name: '时间',
          type: 'value'
        },
        series: [
          {
            data: [],
            type: 'line',
            color: '#1a7efc'
          }
        ]
      }
    }
  },
  created() {
    this._salesTrend()
  },
  mounted() {
    this.createTopEchart()
    this.createBottomEchart()
  },
  methods: {
    async _salesTrend() {
      const { data } = await salesTrend()
      if (data && data.code === 200) {
        this.monthList = data.data.month
        this.yearList = data.data.year
        console.log(this.yearList)
        this.setTopOption()
        this.setBottomOption()
      }
    },
    createTopEchart() {
      let myChart = this.$echarts.init(document.getElementById('topEchart'))
      // 绘制图表
      myChart.setOption(this.topOption)
    },
    createBottomEchart() {
      let myChart = this.$echarts.init(document.getElementById('bottomEchart'))
      // 绘制图表
      myChart.setOption(this.bottomOption)
    },
    // 日销售配置
    setTopOption() {
      let option = deepClone(this.topOption)
      let monthList = deepClone(this.monthList)
      monthList.forEach((item, index) => {
        // 截取时间
        if (item.sellTimeByString && item.money != null) {
          let day = item.sellTimeByString.split('-')[2]
          option.xAxis.data.push(day)
          option.series[0].data.push(item.money)
        }
      })
      this.topOption = option
      this.createTopEchart()
    },
    // 月销售配置
    setBottomOption() {
      let option = deepClone(this.bottomOption)
      let yearList = deepClone(this.yearList)
      yearList.forEach((item) => {
        if (item.sellTimeByString && item.money != null) {
          // console.log(item)
          let month = item.sellTimeByString.split('-')[1]
          option.xAxis.data.push(month)
          option.series[0].data.push(item.money)
        }
      })
      this.bottomOption = option
      this.createBottomEchart()
    }
  }
}
</script>

<style lang="less" scoped>
.sales_wrap {
  .top_wrap {
    width: 100%;
    height: 350px;
    .title_1 {
      position: absolute;
      margin: 0 auto;
      text-align: center;
      left: 48.5%;
      top: 25%;
      span {
        color: #8a8a8a;
      }
    }
    .top {
      margin-top: 16px;
      height: 350px;
    }
  }
  .bottom_wrap {
    width: 100%;
    height: 350px;
    .title_2 {
      position: absolute;
      margin: 0 auto;
      text-align: center;
      left: 48.5%;
      top: 70%;
      span {
        color: #8a8a8a;
      }
    }
    .bottom {
      margin-top: 16px;
      height: 350px;
    }
  }
}
</style>
